<template>
  <div class="dataMain">
    <div class="flex-col w-full flex justify-start items-center">
      <h3 class="text-2xl font-bold mt-10">{{ $t("aboutTravelAi.data") }}</h3>
    </div>
    <img
      src="../../../assets/images/aboutTravelAi/data/line.png"
      alt=""
      class="line"
    />
    <div class="dataContent">
      <img
        v-for="item in 6"
        :src="getImgUrl('../../../assets/images/aboutTravelAi/data', item)"
        alt=""
        class="iconStyle"
        :class="`img${item}`"
      />
      <div
        v-for="(item, index) of dataList"
        :key="index"
        :class="`dataText${index + 1}`"
        class="dataText"
      >
        <img
          :src="getImgUrl('../../../assets/images/aboutTravelAi', index + 1)"
          alt=""
          width="30"
        />
        <h3>{{ item.title }}</h3>
        <p>{{ item.text }}</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const dataList = computed(() => {
  return [
    {
      title: t("aboutTravelAi.data1"),
      text: t("aboutTravelAi.dataText1"),
    },
    {
      title: t("aboutTravelAi.data2"),
      text: t("aboutTravelAi.dataText2"),
    },
    {
      title: t("aboutTravelAi.data3"),
      text: t("aboutTravelAi.dataText3"),
    },
    {
      title: t("aboutTravelAi.data4"),
      text: t("aboutTravelAi.dataText4"),
    },
    {
      title: t("aboutTravelAi.data5"),
      text: t("aboutTravelAi.dataText5"),
    },
    {
      title: t("aboutTravelAi.data6"),
      text: t("aboutTravelAi.dataText6"),
    },
  ];
});
const getImgUrl = (url, code) => {
  return new URL(`${url}/${code}.png`, import.meta.url).href;
};
</script>
<style lang="scss" scoped>
.dataMain {
  height: 100%;
  width: 100%;
  background: url("@/assets/images/aboutTravelAi/data/bg.png") no-repeat;
  background-size: 100% 100%;
  background-position: center;
  position: relative;
  .line {
    width: 80%;
    height: 50px;
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .dataContent {
    position: relative;
    height: 100%;
    .iconStyle {
      position: absolute;
      transform: translate(-50%, -50%);
    }
    .img1 {
      top: 40%;
      left: 14%;
    }
    .img2 {
      top: 46%;
      left: 26%;
    }
    .img3 {
      top: 46%;
      left: 38%;
    }
    .img4 {
      top: 42%;
      left: 52%;
    }
    .img5 {
      top: 44%;
      left: 66%;
    }
    .img6 {
      top: 46%;
      left: 78%;
    }
    .dataText {
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: start;
      img {
        margin-bottom: 5%;
      }
      h3 {
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        margin-bottom: 5%;
      }
      p {
        max-width: 220px;
        font-size: 14px;
        color: #666666;
        margin-bottom: 5%;
      }
    }
    .dataText1 {
      position: absolute;
      top: 50%;
      left: 13%;
      img {
        margin-bottom: 5%;
      }
    }
    .dataText2 {
      position: absolute;
      text-align: bottom;
      flex-direction: column-reverse;
      grid-auto-flow: row-reverse;
      top: 20%;
      left: 25%;
    }
    .dataText3 {
      position: absolute;
      top: 53%;
      left: 36%;
    }
    .dataText4 {
      position: absolute;
      top: 6%;
      left: 51%;
      flex-direction: column-reverse;
      grid-auto-flow: row-reverse;
    }
    .dataText5 {
      position: absolute;
      top: 53%;
      left: 65%;
    }
    .dataText6 {
      position: absolute;
      top: 18%;
      left: 77%;
      flex-direction: column-reverse;
      grid-auto-flow: row-reverse;
    }
  }
}
</style>
